<template>
    <div class="jd-goods-list">
        <JdHeader title="商品列表" back></JdHeader>
        <van-card v-for="item in goodsList" num="10" :price="item.originprice" :desc="item.desc" :title="item.proname"
            :thumb="item.img1">
            <template #footer>
                <van-button size="mini" type="warning" @click="goToDetail(item.proid)">查看详情</van-button>
                <van-button size="mini" type="danger" @click="addCart(item.proid)">加入购物车</van-button>
            </template>
        </van-card>
    </div>
</template>
  
<script setup lang="ts">
// 只要来过这个页面, 就相当于进入了一次搜索
// 就需要拿到带过来的信息, 存储在 localStorage 内
import { useRoute, useRouter, type RouteLocationNormalizedLoaded, type Router } from 'vue-router'
import { onMounted, ref } from 'vue'
import { searchListApi } from '@/api/goods'
import type { MyHotItem } from "@/config/interface"
import { addCartApi } from '@/api/cart'
import { Toast } from 'vant';

const $route: RouteLocationNormalizedLoaded = useRoute()
const $router: Router = useRouter()

// 准备一个函数, 拿到搜索带过来的信息存储在 localStorage 内
const setLocalStorage = (text: string): void => {
    const historyList: string[] = JSON.parse(window.localStorage.getItem('history') as string) || []
    // 把 text 追加到数组内, 然后重新存储回 localStorage 内
    // 如果历史记录内有和这个信息了, 不需要插入了

    // const res: boolean = historyList.indexOf(text) === -1
    // res === true 说明没有, 需要存储
    // if (res) {
    // 存储的逻辑
    // }
    // 代码来到这里, 是什么都不做的操作

    // const res: boolean = historyList.indexOf(text) !== -1
    // res === true 说明 有
    // 什么都不做
    // if (res) return
    // 有的逻辑

    const res: boolean = historyList.indexOf(text) !== -1

    if (res) return

    // 代码来到这里, 说明历史记录内没有记录过该信息
    historyList.push(text)

    // 再次把最新的数组存储到 localStorage 内
    window.localStorage.setItem('history', JSON.stringify(historyList))
}

// 根据关键字请求当前页面的数据
// 需要用到携带过来的关键字 
// 准备一个数据,表示当前第几页
const count = ref<number>(1)

// 准备一个数据,表示页面渲染数组
const goodsList = ref<MyHotItem[]>([])
const getGoodsList = async (text: string) => {
    // 根据text关键字请求列表渲染
    const res = await searchListApi(text, count.value)
    goodsList.value = res.data
    console.log(res.data);

}

// 跳转到详情页
const goToDetail = (id: string) => {
    // console.log(`查看id 为 ${id} 的商品详情`);
    // 直接跳转路由,携带参数即可
    $router.push({ path: '/detail', query: { proid: id } })

}

// 加入购物车
const addCart = async (id: string) => {
    // console.log(`将id为 ${id} 的商品加入购物车`);
    // 根据id请求接口数据,加入购物车

    // 获取一次用户id 和 token(为了验证有没有)
    const user_id = window.localStorage.getItem('user_id')
    const token = window.localStorage.getItem('token')

    // 做一次非空验证
    if (!user_id || !token) {
        // 您还没有登录,请登录后重试
        Toast({
            message: '你还没有登录'
        })
        return
    }
    // 代码执行到这里,说明有token
    // 但是不一定对,只能请求看看
    const res = await addCartApi(user_id, id)
    console.log(res)

    // 判断
    if (res.code === '200') Toast({ message: '加入购物车成功' })

}

onMounted(() => {
    const searchText = $route.query.search
    searchText && setLocalStorage(searchText as string)
    searchText && getGoodsList(searchText as string)
})
</script>
  
<style scoped lang="scss">
.jd-goods-list {
    height: 100%;
    overflow-y: auto;
}
</style>
  